<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">修改昵称</block>
		</cu-custom>
		<view class="username">
			<input v-model="name" type="nickname" confirm-type="done" />
		</view>
		<view class="btn">
			<button style="color:#f39a6e" size="mini" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				second: 2,
				name:''
			};
		},
		computed: {
			...mapState('m_user', ['userinfo','token'])
		},
		onLoad() {
			this.name=this.userinfo.nickName
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			async save() {
				const data = await uni.$http.post('/update/updateusername', {
					token: this.token,
					nickName: this.name
				})
				if (data.data.status === 0) {

					this.updateUserInfo({
						...this.userinfo,
						nickName: this.name
					});
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '更新成功！',
							icon: 'success',
							duration: 1000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							uni.navigateBack()
							return
						}
						uni.showToast({
							title: '更新成功！',
							icon: 'success',
							duration: 1000
						});
					}, 1000)

				} else {
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.username {
		width: 100%;
		height: 90rpx;
		border-bottom: 1px solid #f39a6e;

		input {
			height: 100rpx;
			font-size: 50rpx;
			margin-bottom: 10rpx;
			padding-left: 10rpx;
		}

		margin-bottom: 10rpx;
	}

	.btn {
		display: flex;
		justify-content: right;
		margin-right: -628rpx;
	}
</style>